<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
                <el-form-item label="车辆类型">
                    <el-input v-model="formInline.type" placeholder="车辆类型"></el-input>
                </el-form-item>
                <el-form-item label="出发地">
                    <el-input v-model="formInline.departplace" placeholder="车辆类型"></el-input>
                </el-form-item>
                <el-form-item label="返回地">
                    <el-input v-model="formInline.returnto" placeholder="车辆类型"></el-input>
                </el-form-item>
                <el-form-item label="审批状态">
                    <el-select class="ipt-width-150" v-model="formInline.state" placeholder="选择状态">
                        <el-option label="--请选择--" value="0"></el-option>
                        <el-option
                                v-for="(item,index) in sector"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="select()">查询</el-button>
                    <el-button type="primary" @click="cleanall()">清空</el-button>
                    <el-button type="primary" @click="motalVisible = true">新建+</el-button>
                </el-form-item>
            </el-form>
            <!--新建申请单的模态框-->
            <el-dialog title="车辆申请单" :visible.sync="motalVisible">
                <el-form :model="form">
                    <el-form-item label="申请部门:" :label-width="formLabelWidth">
                        <el-input v-model="form.department" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型:" :label-width="formLabelWidth">
                        <el-input v-model="form.type" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="车辆数量:" :label-width="formLabelWidth">
                        <el-input v-model="form.carsCount" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="用车日期:" :label-width="formLabelWidth">
                        <el-input v-model="form.useDate" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="返回日期：" :label-width="formLabelWidth">
                        <el-input v-model="form.backDate" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="用车事由：" :label-width="formLabelWidth">
                        <el-input v-model="form.reason" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="出发地：" :label-width="formLabelWidth">
                        <el-input v-model="form.add" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="返回地：" :label-width="formLabelWidth">
                        <el-input v-model="form.backAdd" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="form.remarks" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="motalVisible = false">取 消</el-button>
                    <el-button type="primary" @click="motalVisible = false,subData()">确 定</el-button>
                </div>
            </el-dialog>
        </el-header>
        <el-main >
            <el-table
                    :data="carsData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                    border
                    class="user-list"
                    style="width: 100%">
                <el-table-column
                        prop="deptid"
                        label="申请部门"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="用车事由"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="departplace"
                        label="出发地"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="returnto"
                        label="返回地"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="usedate"
                        label="用车日期"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="returndate"
                        label="返回日期"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="carid"
                        label="车辆类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="carsum"
                        label="车辆数量"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="审批状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="look(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="user-list-page"
                    :total="carsData.length">
            </el-pagination>
            <!--查看详情模态框-->
            <el-dialog title="车辆申请详情" :visible.sync="dialogFormVisible">
                <el-form :model="formDetail">
                    <el-form-item label="申请部门:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.department" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.type" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="车辆数量:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.carsCount" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="用车日期:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.useDate" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="返回日期：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.backDate" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="用车事由：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.reason" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="出发地：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.add" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="返回地：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.backAdd" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.remarks" autocomplete="off" readonly></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "cars",
        data(){
            return{
                formInline:{
                    type:'',
                    departplace:'',
                    returnto:'',
                    state:'不限'
                },
                /*表格数据*/
                carsData: [],
                /*申请详情单*/
                form:{
                        carsId:'',
                        department:'',
                        type:'',
                        carsCount:'',
                        useDate:'',
                        backDate:'',
                        reason:'',
                        add:'',
                        backAdd:'',
                        remarks:'',
                    },
                /*查看详情单*/
                formDetail:{
                        carsId:'',
                        department:'',
                        type:'',
                        carsCount:'',
                        useDate:'',
                        backDate:'',
                        reason:'',
                        add:'',
                        backAdd:'',
                        remarks:'',
                    },
                formLabelWidth:'120px',
                dialogFormVisible: false,
                motalVisible: false,
                //新增模态框确定后删除
                clearDiaLogInner(){
                    this.form.department !== "" &&
                    this.form.type !== "" &&
                    this.form.carsCount !== "" &&
                    this.form.useDate !== "" &&
                    this.form.backDate !== "" &&
                    this.form.reason !== "" &&
                    this.form.add !== "" &&
                    this.form.backAdd !== "" &&
                    this.form.remarks !== ""
                },
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                size:5,
                sector: {state1:"审批中",state2:"审批通过",state3:"审批未通过",}
            }
        },
        methods:{
            //查询按钮绑定方法
            select(){
                let that = this
                // console.log(this.formInline)
                let data = {empid:9}
                let url = "/api/selectCarapplication";
                that
                    .$axios({
                        method: "post",
                        url: url,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                        data: JSON.stringify(data),
                    })
                .then((res)=>{
                    let arr = res.data.data;
                    if(that.formInline.type){
                        arr = arr.filter(function (val,index) {
                            return val.carid == that.formInline.type
                        });
                    }
                    if(that.formInline.departplace){
                        arr = arr.filter(function (val,index) {
                            return val.departplace == that.formInline.departplace
                        });
                    }
                    if(that.formInline.returnto){
                        arr = arr.filter(function (val,index) {
                            return val.returnto == that.formInline.returnto
                        });
                    }
                    if (
                        that.formInline.state != "不限" &&
                        that.formInline.state != "请选择"
                    ) {
                        arr = arr.filter(function (val, index) {
                            let state = 0
                            if (that.formInline.state == "审批中") {
                               state = 1
                            }
                            if (that.formInline.state == "审批通过") {
                                state = 2
                            }
                            if (that.formInline.state == "审批未通过") {
                                state = 3
                            }
                            return val.state == state

                        });
                    }
                    console.log(arr)
                    arr = arr.filter(function (val,index) {
                        if(val.state == 1){
                            val.state = '审批中'
                        }
                        if(val.state == 2){
                            val.state = '审批通过'
                        }
                        if(val.state == 3){
                            val.state = '审批未通过'
                        }
                        return true
                    })
                    this.carsData = arr
                    that.total = that.carsData.length;
                })
            },
            cleanall() {
                this.formInline.type = "";
                this.formInline.departplace = "";
                this.formInline.returnto = "";
                this.formInline.state = "不限";
                this.select()
            },
            //查看详情模态框按钮
            look(e){
                this.dialogFormVisible = true
                this.formDetail =e
            },
            //表格数据居中显示
            cellStyle({row,column,rowIndex,columnIndex}){
                return "text-align:center"
            },
            rowClass({row,rowIndex}){
                return "text-align:center"
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },
            //清空新建输入框
            empty(){
                this.form.department = "";
                this.form.type = "";
                this.form.carsCount = "";
                this.form.useDate = "";
                this.form.backDate = "";
                this.form.reason = "";
                this.form.add = "";
                this.form.backAdd = "";
                this.form.remarks = "";
                console.log("清空")
            },
            //从后端中获取数据
            info() {
                let that = this;
                let carappUrl = "/api/selectCarapplication";
                let params = {
                    "empid": 9,
                    "id": 0,
                    "password": "string"
                }
                //获取车辆申请单的数据
                that
                    .$axios({
                        method: "post",
                        url: carappUrl,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                        data: JSON.stringify(params),
                    })
                    .then((res) => {
                        let carsObj = res.data.data
                        console.log(carsObj)
                        carsObj.forEach((value, index, arr) => {
                            let nowValueState = value.state;
                            let tempState = "";
                            if (nowValueState == 1) {
                                tempState = "审批中";
                            } else if (nowValueState == 2) {
                                tempState = "审批通过";
                            } else if (nowValueState == 3) {
                                tempState = "审批未通过";
                            }
                            value.state = tempState;
                        })
                        this.carsData = res.data.data
                    })
                this.clearDiaLogInner()
            },
            //上传数据
            subData() {
                if (
                    this.form.department !== "" &&
                    this.form.type !== "" &&
                    this.form.carsCount !== "" &&
                    this.form.useDate !== "" &&
                    this.form.backDate !== "" &&
                    this.form.reason !== "" &&
                    this.form.add !== "" &&
                    this.form.backAdd !== "" &&
                    this.form.remarks !== ""
                ) {
                    //axios添加车辆申请
                    let that = this;
                    let url = "/api/insertCarapplication";
                    console.log(this.form);
                    let params = {
                        empid: 9,
                        deptid: this.form.department,
                        carid: this.form.type,
                        carsum: this.form.carsCount,
                        usedate: this.form.useDate,
                        returndate: this.form.backDate,
                        reason: this.form.reason,
                        departplace: this.form.add,
                        returnto: this.form.backAdd,
                        remark: this.form.remarks
                    };
                    console.log(params);
                    that
                        .$axios({
                            method: "post",
                            url: url,
                            headers: {
                                "Content-Type": "application/json;charset=utf-8",
                            },
                            data: JSON.stringify(params),
                        })
                        .then((res) => {
                            console.log(res);
                            console.log("res");
                            that.info();
                        });
                } else {
                    alert("表中有未填项，请继续填写");
                }
                this.empty()
            },

        },
        created() {
            this.total = this.carsData.length;
            this.info();
        }
    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>